<template>
	<div class="nav-tag-list">
		<div
			class="nav-tag-item fc"
			:class="{ active: item.value == activeTag }"
			v-for="(item, index) in navTagList"
			:key="index"
			@click="handleClick(item)"
		>
			<div class="text">{{ item.label }}</div>
			<el-icon v-if="closable" class="icon" @click="handleDelete(item, index)">
				<icon-close-one theme="filled" size="20" fill="#93959b" strokeLinejoin="miter" strokeLinecap="butt" />
			</el-icon>
		</div>
		<div class="nav-btn" v-if="addable">
			<el-button color="#4787F0" @click="handleAdd">
				<el-icon>
					<icon-plus />
				</el-icon>
			</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
const props = defineProps<{
	tabs: {
		label: string
		value: number
		tip?: string
	}[]
	modelValue: number|string
	closable?: boolean
	addable?: boolean
	max?: number
}>()

const emit = defineEmits(['tab-add', 'tab-change', 'tab-delete', 'update:modelValue'])
const activeTag:any = ref(1)

watch(
	() => props.modelValue,
	(val:any) => {
		activeTag.value = val
	},
	{
		immediate: true,
	}
)
const navTagList = computed({
	get() {
		return props.tabs
	},
	set(val) {},
})

const handleClick = (item) => {
	activeTag.value = item.value
	emit('update:modelValue', activeTag.value)
	setTimeout(() => {
		emit('tab-change', item)
	}, 100)
}

const handleDelete = (item, index) => {
  ElMessageBox.confirm(
    '删除不可恢复，确认删除？',
    '删除提醒',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     emit('tab-delete', item, index)
    })
    .catch(() => {
    })
}
const handleAdd = () => {
	if (navTagList.value.length < 12) {
		setTimeout(() => {
			emit('tab-add', navTagList.value.length + 1)
		}, 100)
	} else {
		ElMessage.warning('最多添加12个标签')
	}
}
</script>

<style scoped lang="scss">
.nav-tag-list {
	display: flex;
	flex-flow: row nowrap;
	gap: 10px;
	position: relative;
	z-index: 0;
	margin-top: 14px;

	&:after {
		content: '';
		width: 100%;
		bottom: -10px;
		position: absolute;
		border-bottom: 2px solid #dde6e9;
		z-index: -1;
	}

	.active {
		background: #eef2ff !important;
		color: #000 !important;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			left: 30%;
			bottom: -11px;
			width: 30px;
			height: 5px;
			border-radius: 2.5px;
			background: #0052d9;
		}
	}

	.nav-tag-item {
		border-radius: 5px;
		background: #f8f9ff;
		color: #93959b;
		min-width: 80px;
    min-height: 27px;
		.text {
			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			text-align: left;
      padding: 4px 16px;
		}
		.icon {
			display: none;
		}
		&:hover {
			background: #eef2ff;
			cursor: pointer;
			.icon {
				display: block;
				transition: transform 0.3s ease-in-out;
			}
		}
	}
}
</style>
